import  React,{Component} from 'react';
import{
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Image,
    ListView
}from 'react-native';

const carJson = require('../Resource/Cars.json');

class KyProfile extends  Component{
    constructor(props){
        super(props);
        let getSectionHeaderData = (dataBlog,sectionIdx)=>{
            return dataBlog[sectionIdx];
        }
        let getRowData = (dataBlog,sectionIdx,rowIdx)=>{
            return dataBlog[sectionIdx + ':' + rowIdx ];

        }

        this.state = {
            dataSource:new ListView.DataSource({
                getSectionHeaderData:getSectionHeaderData,
                getRowData:getRowData,
                rowHasChanged:(r1,r2)=>r1!=r2,
                sectionHeaderHasChanged:(s1,s2)=>s1!=s2
            })
        }

    }

    render(){
        return (
            <ListView style={styles.container}
                      dataSource={this.state.dataSource}
                      renderRow={this._renderRow}
                      renderSectionHeader={this._renderSectionHeader}/>
        )

    }

    componentDidMount(){
        var sectionIds = [];
        var rowIds = [];
        var dataBlog = {};
        for(var i=0;i< carJson.data.length; i++){
            let cars = carJson.data[i].cars;
            sectionIds.push(i);
            rowIds[i] = [];
            dataBlog[i] = carJson.data[i].title;
            for(var j=0;j <cars.length; j++){
                rowIds[i].push(j);
                dataBlog[i + ":" + j] = cars[j];
            }

        }
        this.setState({
            dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlog,sectionIds,rowIds)
        })



    }
    _renderRow(rowData,sectionId,rowId){

        console.log(sectionId + ":" + rowId);

        return (
            <View style={styles.cellStyle}>
                <Image style={styles.imgStyle} source={{uri:rowData.icon}}></Image>
                <Text>{rowData.name}</Text>
            </View>
        )

    }
    _renderSectionHeader(sectionData,sectionId){
        return(
            <View style={styles.sectionStyle}>
                <Text>{sectionData}</Text>
            </View>
        )

    }

}

const styles = StyleSheet.create({
    container:{
        flex:1,


    },
    imgStyle:{
        width:80,
        height:80,
        margin:8
    },
    cellStyle:{
        flexDirection:'row',
        alignItems:'center'


    },
    sectionStyle:{
        height:30,
        backgroundColor:'#e8e8e8',
        justifyContent:'center',
        flexDirection:'row',
        alignItems:'center'
    }
});

module.exports = KyProfile;
